<style scoped lang="less">
.layout-logo {
  width: 200px;
  height: 64px;
  border-radius: 3px;
  position: relative;
  text-align: center;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid #002140;
}
.layout-logo div {
  padding: 10px 20px;
  height: 40px;
  width: 120px;
  background: #ccc;
  border-radius: 4px;
}
.layout-nav {
  width: 420px;
  float: right;
  margin-right: 20px;
}
.layout {
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  height: 100%;
}
.layout-header-bar {
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
.ivu-menu-horizontal.ivu-menu-light:after {
  height: 0;
}
.contentContain {
  margin: 56px 0 20px 0;
  /*padding: 4px;*/
  /*background: white;*/
}

/* 左边菜单容器 */

.leftMenuContainOne {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 200px;
  background: #001529;
  z-index: 200;
  overflow: hidden;
  transition: 0.6s;
}
.leftMenuContainTwo {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 64px;
  background: #001529;
  z-index: 200;
  overflow: visible;
  transition: 0.6s;
}

/* 收起时，左边导航菜单 */

.menuIcon {
  width: 64px;
  height: 56px;
  background: #001529;
  text-align: center;
  line-height: 56px;
  margin-right: 5px;
}
.ivu-dropdown:hover .menuIcon,
.menuIcon:hover {
  background: #2d8cf0;
  transition: 0.6s;
}

/* icon旋转 */

.iconRotateDivOne {
  position: fixed;
  top: 0;
  left: 216px;
  width: 64px;
  height: 64px;
  line-height: 64px;
  z-index: 200;
  transition: 0.6s;
}
.iconRotateDivTwo {
  position: fixed;
  top: 0;
  left: 80px;
  width: 64px;
  height: 64px;
  line-height: 64px;
  z-index: 200;
  transition: 0.6s;
}
.iconRotateOne {
  transform: rotate(0deg);
  transition: transform 1s;
  cursor: pointer
}
.iconRotateTwo {
  transform: rotate(90deg);
  transition: transform 1s;
  cursor: pointer
}

/* 内容容器与左边的距离1 */
/*主体内容区*/
.contentOne {
  position: fixed;
  top: 10px;
  bottom: 0;
  left: 200px;
  right: 0;
  transition: 0.6s;
  background: #fff;
  min-width: 1100px;
  overflow: auto;
}
.contentTwo {
  position: fixed;
  top: 10px;
  bottom: 0;
  left: 64px;
  right: 0;
  transition: 0.6s;
  background: #f5f7f9;
  overflow: auto;
}
.contentOne:-webkit-full-screen,
.contentTwo:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

/* header宽度变化 */

.headerContain {
  position: fixed;
  top: 0;
  right: 0;
  background: #fff;
  /*box-shadow: 0 0 6px 1px #eee;*/
  border-bottom: 1px #ede8e8ab solid;
  z-index: 100;
  transition: 0.6s;
  display: flex;
}
.headerLeft1 {
  left: 200px;
}
.headerLeft2 {
  left: 64px;
}

/* 修改主题 */

.ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened {
  background: #000c17;
}

/* 修改默认样式：左边菜单【收起】，显示的子菜单 */

.myDropdownMenu {
  background: #001529 !important;
  margin: -5px 0;
  padding: 5px 0;
  border-radius: 4px;
}
.myDropdownMenu li {
  color: #ffffff !important;
}
.myDropdownMenu li:hover {
  background: #2d8cf0 !important;
}

/* 滚动条显示1 */

.footContain {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  height: 20px;
  line-height: 20px;
  text-align: center;
  /*background: rgb(245, 247, 249);*/
  background: #fff;
}
.isOpen {
  overflow: hidden !important;
  height: 100vh;
  width: 200px;
  transition: 0.6s;
}
.isClose {
  width: 64px;
  transition: 0.6s;
}
.closeTitle {
  width: 64px;
  height: 64px;
  text-align: center;
  line-height: 64px;
  border-bottom: 2px solid #002140;
  color: white;
}
.BreadcrumbContain {
  padding-left: 60px;
  flex: 1;
}
.naviDiv {
  flex: 1;
  display: flex;
  width: 130px;
  .space {
    flex: 1;
  }
  .fullScreen {
    flex: 0 0 30px;
  }
  .user {
    flex: 0 0 100px;
    padding-right: 20px;
  }
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active{
  transition: all 0.8s ease;
}

.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateY(-50px);
  opacity: 0;
}

</style>
<template>
  <div class="layout">
    <!-- 左边菜单 start -->
    <div :class="leftMenuContainObj">
      <!-- <happy-scroll color="rgba(153, 153, 153, 1)" resize :style="{overflow:iconRotate?'hidden':'visible'}"></happy-scroll> -->
      <!-- 展开 -->
      <div class="isOpen" v-show="iconRotate">
        <vue-scroll :ops="vueScrollOps">
          <!--<div class="layout-logo"> <img :src="logo" style="width: auto;height: 64px;" /> </div>-->
          <div class="layout-logo" style="font-size: 30px;font-weight: 900;"></div>
          <Menu :active-name="menuLocal.index+'-'+menuLocal.index2" theme="dark" width="auto" :accordion="true"
                :open-names="[menuLocal.index]" ref="side_menu" class="markMenu">
            <Submenu :name="index" v-for="(item,index) in menuData" :key="index ">
              <template slot="title">
                <div style="display:inline-block;">
                  <Icon :type="item.icon"></Icon> {{item.text}} </div>
              </template>
             <!-- <MenuItem :name="index+'-'+index2" v-for="(item2,index2) in item.children" :key=" 'bc'+index2 " @click.native="toPage(item, index, item2, index2)">
              <Icon :type="item2.icon"></Icon>{{item2.text}} </MenuItem>-->
              <div v-for="(item2,index2) in item.children" :key=" 'bc'+index2 ">
                <!--二级路由 start-->
                <MenuItem :name="index+'-'+index2" @click.native="toPage(item, index, item2, index2,null,null)"
                          v-if="item2.children.length == 0" class="markMenuItem">
                  <Icon :type="item2.icon"></Icon>
                  {{item2.text}}
                </MenuItem>
                <!--二级路由 end-->
                <!--三级路由 start-->
                <Submenu :name="index+'--'+index2" v-if="item2.children.length > 0" class="markThirdSubMenu">
                  <template slot="title">
                    <div style="display:inline-block;">
                      <Icon :type="item2.icon"></Icon>
                      {{item2.text}}
                    </div>
                  </template>
                  <MenuItem :name="index+'-'+index2+'-'+index3" @click.native="toPage(item, index, item2, index2, item3, index3)"
                             v-for="(item3,index3) in item2.children" :key="'bcd'+index3 " class="markThirdMenuItem">
                    <Icon :type="item3.icon"></Icon>
                    {{item3.text}}
                  </MenuItem>
                </Submenu>
                <!--三级路由1 end-->
              </div>
            </Submenu>
          </Menu>
        </vue-scroll>
      </div>
      <!-- 收起 -->
      <div class="isClose" v-show="!iconRotate">
        <div class="closeTitle"> MS </div>
        <Dropdown placement="left-start" v-for="(item,index) in menuData" :key="'sp'+index">
          <div class="menuIcon">
            <Icon :type="item.icon" :size="20" :color="'white'"></Icon>
          </div>
          <DropdownMenu slot="list" class="myDropdownMenu" v-show="item.children.length > 0">
            <DropdownItem v-for="(item2,index2) in item.children" :key="'sc'+index2" @click.native="toPage(item, index, item2, index2)" style="line-height:32px;">
              <Icon :type="item2.icon"></Icon>{{item2.text}} </DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </div>
    <!-- 左边菜单 end -->
    <!-- 展开or收起 -->
    <div :class="iconRotateDivObj">
      <Icon type="md-reorder" :size="24" :class="iconRotateObj" @click.native="iconRotateClick"></Icon>
    </div>
    <!-- 页面head start -->
    <div :class="{headerLeft1:iconRotate, headerLeft2:!iconRotate, headerContain:true}">
      <div class="BreadcrumbContain contentVertical">
        <Breadcrumb>
          <BreadcrumbItem v-for="(item,index) in BreadcrumbData" :key=" 'n'+index ">{{item}}</BreadcrumbItem>
        </Breadcrumb>
      </div>
      <div class="naviDiv contentVertical">
        <div class="space">
          <!-- space占位不能删 -->
        </div>
        <div class="fullScreen contentRight" style="margin-right: 8px;font-size: 30px;">
          <Icon type="ios-home" title="返回主页" style="cursor: pointer;" @click="backHome"/>
        </div>
        <div class="fullScreen contentRight" style="margin-right: 8px;">
          <fullscreen v-model="isFullscreen"></fullscreen>
        </div>
        <div class="user contentRight">
          <Dropdown>
            <Badge :count="0">
              <Avatar shape="circle" icon="ios-person" :style="{background: '#ffbf00'}" />&nbsp; {{loginer}} </Badge>
            <DropdownMenu slot="list">
              <DropdownItem @click.native="goInformation()">个人信息</DropdownItem>
              <DropdownItem @click.native="$router.push({name:'console'})" v-show="ifsHowDeep">深色版</DropdownItem>
              <DropdownItem @click.native="logout()">退出</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </div>
    </div>
    <!-- 页面内容1111Layout -->
    <div :class="contentContainObj">
      <Content class="contentContain">
        <transition name="slide-fade">
          <router-view></router-view>
        </transition>
      </Content>
      <!--<div class="footContain"> 2018-2028 &copy; 广州工机物联科技有限公司 </div>-->
    </div>
  </div>
</template>
<script>
// import menuData from '../../api/menu.js'
import fullscreen from './components/fullscreen/index'
export default {
  name: 'Home',
  components: { fullscreen },
  data: function () {
    return {
      ifsHowDeep: this.$store.state.user.topMenuUrl === '/energy',
      loginer: '',
      logo: require('../../assets/logo.png'),
      menuLocal: { index: 0, index2: 0 },
      menuData: [],
      BreadcrumbData: [],
      iconRotate: true,
      iconRotateObj: { iconRotateOne: true, iconRotateTwo: false },
      iconRotateDivObj: { iconRotateDivOne: true, iconRotateDivTwo: false },
      contentContainObj: { contentOne: true, contentTwo: false },
      leftMenuContainObj: { leftMenuContainOne: true, leftMenuContainTwo: false },
      isFullscreen: false,
      vueScrollOps: {
        bar: {
          background: '#515a6e'
        }
      }
    }
  },
  created: function () {
    this.menuData = this.$store.state.user.menus
    this.loginer = this.$store.state.user.user
    let self = this
    // 初始进入页面时，判断是否有当前路由菜单的标记，分情况处理
    if (sessionStorage.menuLocal) {
      // 刷新时
      let tem = JSON.parse(sessionStorage.menuLocal)
      let index = parseInt(tem.index)
      let index2 = parseInt(tem.index2)
      self.menuLocal = { index: index, index2: index2 }
      self.nav(self.menuData[index], index, self.menuData[index].children[index2], index2)
    } else {
      // 初始化
      self.nav(self.menuData[0], 0, self.menuData[0].children[0], 0)
    }
  },
  mounted: function () {
    /* 为处理 首页没有子菜单 特殊处理 */
    // 展开
   /* let SubmenuHome = document.querySelector('.ivu-menu-submenu-title')
    document.querySelector('.ivu-menu-submenu-title-icon').style.opacity = 0
    SubmenuHome.addEventListener('click', this.homeTitleClick)
    // 收起 menuIcon
    let SubmenuHome2 = document.querySelector('.menuIcon')
    SubmenuHome2.addEventListener('click', this.homeTitleClick)*/
  },
  destroyed: function () {
    // console.log('--destroyed--')
  },
  methods: {
    show: function (index) {
      this.$Modal.info({
        title: 'User Info',
        content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
      })
    },
    remove: function (index) {
      this.data6.splice(index, 1)
    },
    backHome: function () {
      // 把 标记菜单的变量清掉
      sessionStorage.removeItem('menuLocal')
      this.$router.push({path: '/display'})
    },
    toPage: function (item, index, item2, index2, item3, index3) {
      if (item3) {
        // 兼容三级路由
        this.$router.push(item.url + '/' + item2.url + '/' + item3.url)
      } else {
        // 暂兼容首页多个顶级路由进入不同的含有左侧导航菜单的页面
        this.$router.push(this.$store.state.user.topMenuUrl + '/' + item.url + '/' + item2.url)
        // 原来只有一个 左侧菜单的。
        // this.$router.push(item.url + '/' + item2.url)
      }
      this.nav(item, index, item2, index2, item3, index3)
    },
    nav: function (item, index, item2, index2, item3, index3) {
      this.BreadcrumbData = []
      sessionStorage.menuLocal = JSON.stringify({ index: index, index2: index2 })
      // 负责面包屑的内容显示
      this.BreadcrumbData.push(item.text) // '首页',
      if (item2 && item2.text) {
        this.BreadcrumbData.push(item2.text)
      }
      if (item3 !== undefined && item3 !== null) {
        if (item3.text) {
          this.BreadcrumbData.push(item3.text)
        }
      }
    },
    logout: function () {
      sessionStorage.menuLocal = ''
      this.$router.push({ path: '/login' })
    },
    goInformation: function (){
      this.$router.push({ path: '/userinfo' })
    },
    // icon按钮 左边菜单展开or收起
    iconRotateClick: function () {
      let self = this
      self.iconRotate = !self.iconRotate
      // icon展开 收起
      self.iconRotateObj = { iconRotateOne: self.iconRotate, iconRotateTwo: !self.iconRotate }
      self.iconRotateDivObj = { iconRotateDivOne: self.iconRotate, iconRotateDivTwo: !self.iconRotate }
      // 内容与左边的距离
      self.contentContainObj = { contentOne: self.iconRotate, contentTwo: !self.iconRotate }
      // 左边菜单容器变化
      self.leftMenuContainObj = { leftMenuContainOne: self.iconRotate, leftMenuContainTwo: !self.iconRotate }
      // 更新打开的菜单
      self.$nextTick(() => {
        if (sessionStorage.menuLocal && self.iconRotate) {
          self.menuLocal = JSON.parse(sessionStorage.menuLocal)
          self.$refs.side_menu.openedNames = [self.menuLocal.index]
          self.$refs.side_menu.updateOpened()
          self.$refs.side_menu.updateActiveName()
        }
      })
      window.vm.$emit('iconRotateClick', 1)
      // 消除happy-scroll滚动插件,在收起时的影响
      if (self.iconRotate) {
        let obj = document.querySelector('.happy-scroll-container')
        if (obj) {
          obj.style.width = '220px'
        }
      } else {
        let obj = document.querySelector('.happy-scroll-container')
        if (obj) {
          obj.style.width = '64px'
          obj.style.overflow = 'visible'
        }
      }
    },
    // 菜单 首页title单击
    homeTitleClick: function () {
      let self = this
      self.BreadcrumbData = []
      sessionStorage.menuLocal = JSON.stringify({ index: 0, index2: 0 })
      self.menuLocal = JSON.stringify({ index: 0, index2: 0 })
      self.BreadcrumbData.push(self.menuData[0].text)
      self.$router.push({ path: 'dashboard' })
      // 首页选中颜色，特殊处理ivu-menu-child-item-active
      if (document.getElementsByClassName('ivu-menu-child-item-active').length > 0) {
        document.getElementsByClassName('ivu-menu-child-item-active')[0].classList.remove('ivu-menu-child-item-active')
      }
      setTimeout(() => {
        let homeLi = document.getElementsByClassName('ivu-menu-submenu')
        homeLi[0].classList.add('ivu-menu-item-active')
        homeLi[0].classList.add('ivu-menu-child-item-active')
        homeLi[0].classList.add('ivu-menu-opened')
      }, 100)
    }
  }
}

</script>
<style>
  .markMenu {
    font-size: 16px;
  }
  .markMenuItem {
    font-size: 15px;
  }
  .markThirdSubMenu {
    font-size: 15px;
  }
  .markThirdMenuItem {
    font-size: 15px;
  }

  .markMenu li .ivu-menu-submenu-title{
    padding: 10px 20px;
  }

  .markMenu .ivu-icon, .markMenuItem .ivu-icon, .markThirdMenuItem .ivu-icon {
    margin-top: -3px;
  }

  li.markMenuItem.ivu-menu-item{
    padding: 10px 20px;
  }
  li.markThirdMenuItem.ivu-menu-item{
    padding: 10px 20px;
  }
</style>
